<template>
    <div class="content">
        <div class="top">
            <ul>
                <li>
                    <SelectIpt>
                        <p>小区</p>
                    </SelectIpt>
                </li>
                <li>
                    <SelectIpt>
                        <p>告警类型</p>
                    </SelectIpt>
                </li>
                <li>
                    <TextIpt>
                        <p>设备型号</p>
                    </TextIpt>
                </li>
                <li>
                    <TextIpt>
                        <p>水表编号</p>
                    </TextIpt>
                </li>
            </ul>
            <div class="btn">
                <BlueBtn>查询</BlueBtn>
                <BlueBtn>导出</BlueBtn>
                <BlueBtn>更新数据</BlueBtn>
            </div>
        </div>
        <div class="table">
            <el-table :data="filterMeterData.slice(pages, pages + 10)" border style="width: 100%">
                <el-table-column prop="Location" label="水表位置" width="180">
                </el-table-column>
                <el-table-column prop="DeviceModel" label="设备型号" width="140">
                </el-table-column>
                <el-table-column prop="DeviceNumber" label="设备编号" width="180">
                </el-table-column>
                <el-table-column prop="ValveState" label="阀门状态" width="120">
                </el-table-column>
                <el-table-column prop="CellVoltate" label="电池电压" width="120">
                </el-table-column>
                <el-table-column prop="AlarmType" label="告警类型" width="180">
                </el-table-column>
                <el-table-column prop="AlarmDate" label="告警时间" width="260">
                </el-table-column>
                <el-table-column prop="DisposeStatus" label="处理状态" width="180">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="lookIntro(scope.$index, scope.row)">详情</el-button>
                        <el-button size="mini" @click="disposeMeter(scope.$index, scope.row)">处理</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <div class="total-page">
                    <p>共<span>{{ Math.ceil(filterMeterData.length / 10) }}</span>页/<span>{{ filterMeterData.length
                            }}</span>条数据
                    </p>
                </div>
                <el-pagination background layout="prev, pager, next,jumper" @current-change="getPage" :page-size=10
                    :current-page.sync=page :total="filterMeterData.length" hide-on-single-page>
                </el-pagination>
            </div>
        </div>
        <!-- 点击详情的弹窗 -->
        <el-dialog title="操作" :visible.sync="introDialog" width="30%" :before-close="handleClose" class="introDialog">
            <el-form ref="introForm" :disabled="isIntro" :model="introForm" label-width="80px" :rules="rules">
                <el-form-item label="设备位置" prop="location">
                    <el-input v-model="introForm.location"></el-input>
                </el-form-item>
                <el-form-item label="告警类型" prop="alarmType">
                    <el-input v-model="introForm.alarmType"></el-input>
                </el-form-item>
                <el-form-item label="阀门状态" prop="valveState">
                    <el-select v-model="introForm.valveState" placeholder="请选择阀门状态">
                        <el-option value="开"></el-option>
                        <el-option value="关"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="告警时间" prop="alarmDate">
                    <el-date-picker v-model="introForm.alarmDate" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="处理状态" prop="disposeStatus">
                    <el-select v-model="introForm.disposeStatus" placeholder="请选择处理状态">
                        <el-option value="处理中"></el-option>
                        <el-option value="未处理"></el-option>
                        <el-option value="已处理"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer" v-if="!isIntro">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('introForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import SelectIpt from '@/components/SelectIpt.vue';
import TextIpt from '@/components/TextIpt.vue';
import BlueBtn from '@/components/BlueBtn.vue';
export default {
    components: {
        BlueBtn,
        SelectIpt,
        TextIpt
    },
    data() {
        return {
            page: 0,
            pages: 0,
            allMeterData: [],
            filterMeterData: [],
            introDialog: false,
            //用于区分点的是详情还是编辑
            isIntro: true,
            introForm: {
                location: "",
                alarmType: "",
                valveState: '',
                alarmDate: '',
                disposeStatus: '',
                index: '',
                id: ''
            },
            rules: {
                location: [
                    { required: true, message: '请输入水表位置', trigger: 'blur' },
                ],
                alarmType: [
                    { required: true, message: '请输入告警原因', trigger: 'blur' },
                ],
                valveState: [
                    { required: true, message: '请选择阀门状态', trigger: 'blur' },
                ],
                alarmDate: [
                    { required: true, message: '请选择告警时间', trigger: 'blur' },
                ],
                disposeStatus: [
                    { required: true, message: '请选择处理状态', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        //修改接口数据
        updateWaterMeter() {
            this.$axios.post('http://127.0.0.1/waterElectricity/updateWaterMeter', {
                ...this.introForm
            }, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.$message({
                    message: '修改数据成功',
                    type: 'success'
                });
                this.introDialog=false
            }).catch(err => {
                console.log(err);
            })
        },
        formatDate(dateStr) {
            // 创建 Date 对象
            const date = new Date(dateStr);

            // 获取年、月、日、小时、分钟（使用本地时区）
            const year = date.getFullYear(); // 本地时间的年份
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
            const day = String(date.getDate()).padStart(2, '0');
            const hour = String(date.getHours()).padStart(2, '0');
            const minute = String(date.getMinutes()).padStart(2, '0');

            // 格式化为 "YYYY-MM-DD HH:MM"
            return `${year}-${month}-${day} ${hour}:${minute}`;
        },
        // 点击处理
        disposeMeter(index, row) {
            this.isIntro = false
            this.introDialog = true
            this.introForm.location = row.Location
            this.introForm.alarmType = row.AlarmType
            this.introForm.valveState = row.ValveState
            this.introForm.alarmDate = row.AlarmDate
            this.introForm.disposeStatus = row.DisposeStatus
            this.introForm.index = index + this.pages
            this.introForm.id = row.ID
        },
        //点击查看详情
        lookIntro(index, row) {
            this.isIntro = true
            this.introForm.location = row.Location
            this.introForm.alarmType = row.AlarmType
            this.introForm.valveState = row.ValveState
            this.introForm.alarmDate = row.AlarmDate
            this.introForm.disposeStatus = row.DisposeStatus
            this.introDialog = true
        },
        submitForm(formName) {
            this.introForm.alarmDate = this.formatDate(this.introForm.alarmDate)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let flag = false
                    if (this.filterMeterData[this.introForm.index].Location != this.introForm.location) {
                        this.filterMeterData[this.introForm.index].Location = this.introForm.location
                        flag = true

                    }
                    if (this.filterMeterData[this.introForm.index].AlarmType != this.introForm.alarmType) {
                        this.filterMeterData[this.introForm.index].AlarmType = this.introForm.alarmType
                        flag = true
                    }
                    if (this.filterMeterData[this.introForm.index].ValveState != this.introForm.valveState) {
                        this.filterMeterData[this.introForm.index].ValveState = this.introForm.valveState
                        flag = true
                    }
                    if (this.filterMeterData[this.introForm.index].AlarmDate != this.introForm.alarmDate) {
                        this.filterMeterData[this.introForm.index].AlarmDate = this.introForm.alarmDate
                        flag = true
                    }
                    if (this.filterMeterData[this.introForm.index].DisposeStatus != this.introForm.disposeStatus) {
                        this.filterMeterData[this.introForm.index].DisposeStatus = this.introForm.disposeStatus
                        flag = true
                    }
                    if (flag) {
                        this.updateWaterMeter()
                        return
                    }
                    console.log(flag);

                    this.introDialog = false;

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //get 当前页
        getPage(page) {
            this.pages = 10 * (page - 1)
        },
        getAllDate() {
            this.$axios.get('http://127.0.0.1/waterElectricity/allWaterMeter', {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.allMeterData = res.data
                this.filterMeterData = res.data
            }).catch(err => {
                console.log(err);
            })
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.introDialog = false
                })
                .catch(_ => { });
        }
    },
    mounted() {
        this.getAllDate()
    }
}
</script>

<style scoped>
.introDialog>>>.el-input {
    width: 217px;
}

.introDialog>>>.el-dialog__body {
    display: flex;
    justify-content: center;
}

.table>>>.el-table {
    min-height: 530px;
}

.page {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 20px;
}

.page>>>button {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    background: #fff !important;
}

.page>>>.active {
    border-color: rgba(26, 135, 254, 1) !important;
    background-color: rgba(26, 135, 254, 1) !important;
    color: #fff !important;
}

.page>>>.el-pager li {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    font-size: 12px;
    color: #999;
    font-weight: normal !important;
    background: #fff;
}

.total-page span {
    color: #FF3C2C;
}

.total-page {
    font-size: 12px;
    color: #666;
}

.top li {
    margin-bottom: 20px;
}
</style>